<template>
  <div class="datafilter">
    <div class="report-title">
      <!-- <div class="report-go" @click="handGo"> -->
      <!-- <i class="el-icon-back"></i> -->

      <!-- </div> -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/datafilter' }">分析数据集管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ dataFilterName }}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 按钮 -->
      <div class="report-btn">
        <div style="font-size: 12px; margin-right: 24px;">
          <span v-if="isSaved">保存时间:{{ updateTime }}</span>
          <span v-else>上次浏览时间：{{ browseTime }}</span>
        </div>
        <!-- 另存 -->
        <el-button type="primary" @click="showSaveConfirm" :disabled="patentIds.length === 0" round
          v-if="!isSaved">保存所选分析数据集</el-button>
        <!-- 导出 -->

      </div>
    </div>

    <div class="datafilter-filter">
      <div class="datafilter-filter-left" ref="leftPanel" @mousedown="startDrag">
        <div class="datafilter-filter-left-title" style="position: relative">
          筛选条件
        </div>
        <div class="choise" v-if="endchoiseList.length > 0">
          <el-collapse v-model="activeNames1">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="filter-title">
                  <div>已筛选({{ endchoiseList.length }})</div>
                  <i class="el-icon-circle-close" @click="deleteAllHanlde"></i>
                </div>
              </template>
              <div v-for="(item, index) in endchoiseList" :key="index" class="filter-item">
                <div class="">
                  <span :class="[
          'filter-item-operateType',
          'type' + item.operateType,
        ]">{{ item.operateType == 1 ? "筛选" : "过滤" }}</span>
                  <span class="filter-item-name">{{ item.name }}: </span>
                  <span class="filter-item-value">
                    (<span v-for="(value, index) in item.vals" :key="index">
                      <span>"{{ value }}"</span>
                      <span v-if="index < item.vals.length - 1"> OR </span>
                    </span>
                    )
                  </span>
                </div>
                <i class="el-icon-circle-close" @click="deletChildren(item, index)"></i>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div style="overflow-y: scroll; padding:0 24px; position: relative; z-index: 0; height:calc(100vh - 260px);">
          <el-collapse class="datafilter-coll" v-model="activeNames" accordion @change="handleChange">
            <el-collapse-item :title="item.name" :name="item.code" v-for="(item, index) in filterList" :key="index">
              <!-- 搜索框 -->
              <div class="datafilter-coll-ipt">
                <el-input size="mini" class="datafilter-coll-temp-ipt" prefix-icon="el-icon-search" v-model="addcontent"
                  placeholder="请输入搜索内容" @change="sortHandler(1)"></el-input>
                <img @click="sortHandler(2)" :src="downimg" alt="" />

                <img @click="numberHandle" :src="numberimg" alt="" />
                <img @click="baiHandle" :src="baiimg" alt="" />
              </div>
              <div class="datafilter-coll-ul">
                <div class="datafilter-coll-li" v-for="(item, index) in selectList" :key="index">
                  <el-tooltip :visible-arrow="false" transition="none" placement="bottom">
                    <template slot="content">
                      {{ item.valName }}
                    </template>

                    <el-checkbox class="checkbox-item" @change="(checked) => checkItemHandle(checked, item)"
                      v-model="item.value">{{ item.valName }}</el-checkbox>
                  </el-tooltip>
                  <span>{{ baiShow ? item.percent : item.count }}</span>
                </div>
              </div>
              <el-row :gutter="8">
                <el-col :span="8" :offset="0">
                  <el-button type="primary" size="mini" :disabled="!selectData.vals || selectData.vals.length === 0"
                    @click="MoreFilterHandle(1)" class="full-width">筛选</el-button>
                </el-col>
                <el-col :span="8" :offset="0">
                  <el-button type="" size="mini" :disabled="!selectData.vals || selectData.vals.length === 0"
                    @click="MoreFilterHandle(2)" class="full-width">过滤</el-button>
                </el-col>
                <el-col :span="8" :offset="0">
                  <el-button type="" size="mini" @click="MoreFilterHandle(3)" class="full-width">更多</el-button>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="datafilter-filter-right">
        <!-- 标题 -->
        <!-- <div class="datafilter-filter-right-top">
          <div class="datafilter-filter-right-top-tilte">已选择:</div>
          <div
            class="datafilter-filter-right-ul"
            v-for="(item, index) in conditionList"
            :key="index"
          >
            <div
              class="datafilter-filter-right-li"
              v-for="(data, i) in item.vals"
              :key="i"
            >
              <div>{{ data }}</div>
              <i
                class="el-icon-circle-close"
                @click="delQueryHandle(item, i, index, data)"
              ></i>
            </div>
          </div>
          <div
            v-if="conditionList.length > 0"
            class="datafilter-filter-right-close"
            @click="deleteAllHanlde"
          >
            清除所有
          </div>
        </div> -->
        <!-- 条件区域 -->
        <div class="datafilter-filter-right-select">
          <div class="datafilter-filter-select-left">
            <el-checkbox v-model="checkedAll" @change="checkAllPatentID" style="width: 80px;" v-if="!isSaved">{{
          !this.checkedAll ? "全选" : "取消全选"
        }}</el-checkbox>
          </div>
          <div class="datafilter-filter-right-bt">
            <!-- <div
              v-if="patentIds.length > 0"
              class="datafilter-filter-right-bt1 mgl12"
              @click="delShow = true"
            >
              删除
            </div> -->
            <div>
              <span style="margin-left: 24px">总共</span>
              <span style="color:#FF6565;">{{ data_total }}</span>
              <span>条数据</span>
            </div>
          </div>
        </div>
        <!-- 内容区域 -->
        <div class="datafilter-filter-right-body">
          <div v-for="(item, i) in dataList" :key="i" :name="i" class="datafilter-item">
            <el-row :gutter="8">
              <el-col :span="1" style="display: flex; justify-content: space-between">
                {{ item.seqNo }}
                <el-checkbox class="" v-model="item.hasBind" v-if="!isSaved"
                  @change="(checked) => getPatentIds(checked, item)"></el-checkbox>
              </el-col>

              <el-col :span="23">
                <div class="datafilter-filter-right-temp-body">
                  <div style="
                      display: flex;
                      align-items: center;
                      width: 100%;
                      margin-bottom: 8px;
                    ">
                    <div class="datafilter-filter-right-temp-title">
                      <span v-if="item.applicationNumber">{{ item.applicationNumber }}</span>
                    </div>
                    <div class="datafilter-filter-right-temp-ul" style="margin-left: 20px">
                      <div class="datafilter-filter-right-temp-li" style="background: #1cb3b8; color: #fff"
                        v-if="item.patentType">
                        {{ item.patentType }}
                      </div>
                      <div class="datafilter-filter-right-temp-li marginL10" :class="{
          otherBk1: item.patentValidity === '有效',
          otherBk2: item.patentValidity === '审中',
          otherBk3: item.patentValidity === '失效',
        }" v-if="item.patentValidity">
                        {{ item.patentValidity }}
                      </div>
                      <div v-if="item.transferCount" class="datafilter-filter-right-temp-li marginL10"
                        style="background: #7baae1; color: #fff">
                        转让
                      </div>
                      <div v-if="item.licensingCount" class="datafilter-filter-right-temp-li marginL10"
                        style="background: #7baae1; color: #fff">
                        许可
                      </div>
                    </div>
                  </div>
                  <div class="date-item-title mb-8">
                    <!-- {{ item.titleEnglish }} -->
                    <span v-if="item.titleEnglish">{{ item.titleEnglish }}</span>
                  </div>
                  <div class="mb-8">{{ item.titleChinese }}</div>

                  <!-- <div class="datafilter-filter-right-temp-content">
                    <div class="label"></div>
                    <div></div>
                  </div> -->
                  <el-row class="mb-8" v-if="item.applicant !== null">
                    <el-col :xl="2" :lg="4">申请人:</el-col>
                    <el-col :xl="22" :lg="20">{{ item.applicant }}</el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="8" v-if="showMoreDetail.indexOf(i) != -1">
              <el-col :span="23" :offset="1">
                <div class="datafilter-filter-right-temp-body">
                  <el-row :gutter="20" class="mb-8" v-if="item.inventor !== null">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">发明设计人:</el-col>
                    <el-col :xl="22" :lg="20" :offset="0" style="color: #939393; font-size: 14px">{{ item.inventor }}</el-col>
                  </el-row>

                  <el-row :gutter="20" class="mb-8" v-if="item.ipcSubclass !== null">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">IPC分类号:</el-col>
                    <el-col :xl="22" :lg="20" :offset="0" style="color: #939393; font-size: 14px">{{ item.ipcSubclass
                      }}</el-col>
                  </el-row>

                  <el-row :gutter="20" class="mb-8" v-if="item.applicantCountryRegion !== null">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">申请国家/地区:</el-col>
                    <el-col :xl="22" :lg="20" style="color: #939393; font-size: 14px">{{ item.applicantCountryRegion
                      }}</el-col>
                  </el-row>


                  <el-row :gutter="20" class="mb-8" v-if="item.publicationDate !== null">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">公开(公告)日:</el-col>
                    <el-col :xl="22" :lg="20" style="color: #939393; font-size: 14px">{{ item.publicationDate
                      }}</el-col>
                  </el-row>

                  <!-- <el-row :gutter="20" class="mb-8">
                    <el-col :span="2" :offset="0" style="color: #939393; font-size: 14px">公标准申请人:</el-col>
                    <el-col :span="22" :offset="0" style="color: #939393; font-size: 14px">{{ item.standardizedApplicant
                      }}</el-col>
                  </el-row>
                  

                  <el-row :gutter="20" class="mb-8">
                    <el-col :span="2" :offset="0" style="color: #939393; font-size: 14px">同族数量:</el-col>
                    <el-col :span="22" :offset="0" style="color: #939393; font-size: 14px">{{ item.docdbFamilyCount
                      }}</el-col>
                  </el-row>

                  <el-row :gutter="20" class="mb-8">
                    <el-col :span="2" :offset="0" style="color: #939393; font-size: 14px">简单同族:</el-col>
                    <el-col :span="22" :offset="0" style="color: #939393; font-size: 14px">{{ item.docdbFamily
                      }}</el-col>
                  </el-row>

                  <el-row :gutter="20" class="mb-8">
                    <el-col :span="2" :offset="0" style="color: #939393; font-size: 14px">优先权号:</el-col>
                    <el-col :span="22" :offset="0" style="color: #939393; font-size: 14px">{{ item.priorityNumber
                      }}</el-col>
                  </el-row> -->



                  <el-row :gutter="20" class="mb-8" v-if="item.dwpiNovelty && item.dwpiNovelty.length > 0">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">摘要新颖性:</el-col>
                    <el-col :xl="22" :lg="20" :offset="0" style="color: #939393; font-size: 14px"
                      v-html="item.dwpiNovelty"></el-col>
                  </el-row>
                  <el-row :gutter="20" class="mb-8" v-if="item.dwpiAdvantages && item.dwpiAdvantages.length > 0">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">摘要优势:</el-col>
                    <el-col :xl="22" :lg="20" :offset="0" style="color: #939393; font-size: 14px"
                      v-html="item.dwpiAdvantages"></el-col>
                  </el-row>
                  <el-row :gutter="20" v-if="item.dwpiNovelty && item.dwpiNovelty.length > 0">
                    <el-col :xl="2" :lg="4" :offset="0" style="color: #939393; font-size: 14px">摘要用途:</el-col>
                    <el-col :xl="22" :lg="20" :offset="0" style="color: #939393; font-size: 14px"
                      v-html="item.dwpiUsage"></el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <div class="btn-open" @click="toggleExpand(i)">
              {{ showMoreDetail.indexOf(i) != -1 ? "收起" : "展开" }}
              <i :class="showMoreDetail.indexOf(i) != -1
          ? 'el-icon-arrow-up'
          : 'el-icon-arrow-down'
          "></i>
            </div>
          </div>
        </div>

        <div class="datafilter-filter-right-btm">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-size.sync="currentPage2" layout="prev, pager, next" :total="data_total">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 筛选数据 -->
    <el-dialog class="datafilter-filter-dialog" :visible.sync="dialogVisible" :show-close="false" width="363px">
      <div slot="title">警告</div>
      <div>
        点击“保存”，当前分析数据集已确定且不可更改，点击“取消”，可继续对数据集进行筛选、过滤等调整操作。
      </div>
      <div slot="footer">
        <div class="datafilter-filter-dialog-bt">
          <el-button @click="dialogVisible = false" style="width: 100px;">取消</el-button>
          <el-button type="primary" @click="bindPatentHandle" style="width: 100px;">确定</el-button>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDataset,
  filterList,
  filterlistVals,
  filterPageList,
  bindPatent,
} from "@/api/modules/filter";
import {
  addanalysis,
  analysisList,
  delanalysis,
  editanalysis,
} from "@/api/modules/analysis";
import { subjectList } from "@/api/modules/subject";
import {
  subjectdatasetList,
  adddatasetList,
  removedatasetList,
  editdatasetList,
} from "@/api/modules/subject_data";
import dateUtils from "../../utils/dateUtils.js";
export default {
  name: "DataFilter",
  data() {
    return {
      activeNames1: '1',
      saveButtonState: false, //保存按钮的状态，false为禁用，true为可用
      checkedAll: false,
      dataList: [],
      openCheck: 0,
      choiseListName: "",
      currentPage2: 10,
      current: 1,
      dialogVisible: false, // 是否显示跳转
      nameSort: {
        sort: "des",
        img1: require("./assets/images/sort-a.png"),
        img2: require("./assets/images/sort-z.png"),
      },
      dateSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      uploadSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      fileDataList: [],
      initObj: {
        name: "init",
        datasetNumber: 0,
        createTime: new Date(),
        description: "123123123123123123123123123",
        id: 1,
      },
      isdatafilter: false,
      isUpload: false,
      name: "",
      addname: "",
      addcontent: "",
      addnode: "",
      addcollect: "",
      isSelect: false,
      selectedList: [
        {
          label: "系统默认数据集",
          value: false,
        },
        {
          label: "系统默认数据集1",
          value: false,
        },
        {
          label: "系统默认数据集2",
          value: false,
        },
        {
          label: "系统默认数据集3",
          value: false,
        },
      ],
      isModel: true,
      activeNames: [],
      isdatachange: false,
      changeQuery: {},
      selectList: [],
      code: "",
      conditionList: [],
      data_total: 0,
      patentIds: [],
      delShow: false,
      filterList: [],
      desc: true,
      choiseList: [],
      endchoiseList: [],
      sortBy: "",
      analysisDatasetId: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      search_name: "",
      small_data: [],
      select_name: [],
      sort: 1,
      baiShow: true,
      downimg: require("./assets/images/up.png"),
      baiimg: require("./assets/images/filter7.png"),
      numberimg: require("./assets/images/filter5.png"),
      limitNum: 10,
      operateType: 1,
      showMoreDetail: [], //详情折叠展开状态
      showMoreList: [], //详情折叠展开
      disbleEdit: true,
      bindFilter: false, //false返回全部数据，true返回用户保存的数据
      selectData: {}, //选择的数据
      isSaved: false, //是否保存
      dataFilterName: '',//分析数据集标题
      browseTime:'', //上次浏览时间
      updateTime:'' //保存时间
    };
  },

  beforeDestroy() {
    this.$bus.$off("showfilter");
  },

  mounted() {
    this.$bus.$on("showfilter", (data) => {
      if (!this.isModel) {
        this.isModel = true;
      }
    });
    this.analysisDatasetId = this.$route.params.id;

    this.getfilterList();
    this.filterPageListHandle();
  },
  methods: {
    startDrag(event) {
      // 记录初始点击位置和左侧面板宽度
      this.startX = event.clientX;
      this.startWidth = this.$refs.leftPanel.offsetWidth;

      // 添加mousemove和mouseup事件监听器
      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    handleDrag(event) {
      // 计算鼠标移动距离
      const moveX = event.clientX - this.startX;

      // 更新左侧面板宽度
      this.$refs.leftPanel.style.width = this.startWidth + moveX + 'px';
    },
    stopDrag() {
      // 移除mousemove和mouseup事件监听器
      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },

    //获取筛选条件列表
    getfilterList() {
      filterList({}).then((res) => {
        if (res.code == 200) {
          this.filterList = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },

    // 选中的栏目
    handleChange(activeNames) {
      if (activeNames) {
        this.filterList.forEach((item) => {
          if (item.code === activeNames) {
            // 选中的栏目名称
            this.choiseListName = item.name;
          }
        });
        // 选中的栏目 code 名称
        this.code = activeNames;
        this.selectList = [];
        // 延迟一段时间再获取数据
        setTimeout(() => {
          this.getFilterlistVals();
        }, 200);

        // 重置搜索框的数据
        this.addcontent = "";
      }
    },

    //获取栏目下的列表数据
    getFilterlistVals() {
      filterlistVals({
        analysisDatasetId: this.analysisDatasetId,
        searchVal: this.addcontent,
        sort: this.sort,
        code: this.code,
        limitNum: this.limitNum,
        operateType: this.operateType,
      }).then((res) => {
        res.forEach((item) => {
          item.value = false;
        });
        this.selectList = res;
      });
    },

    //选择筛选条件中的列表项
    checkItemHandle(checked, data) {
      // selectData当前选中栏目数据
      let flag = this.selectData["code"] === this.code;

      if (!flag && checked) {
        this.selectData = {
          code: this.code,
          name: this.choiseListName,
          operateType: null,
          vals: [`${data.valName}`],
        };
      }

      if (flag && checked) {
        this.selectData.vals.push(data.valName);
      }

      if (flag && !checked) {
        const spice_index = this.selectData.vals.findIndex(
          (item) => item == data.valName
        );
        this.selectData.vals.splice(spice_index, 1);
      }
    },

    MoreFilterHandle(type) {
      this.openCheck = 1;
      if (type == 3) {
        this.limitNum += 10;
        this.getFilterlistVals();
      } else {
        this.operateType = type;
        this.selectData.operateType = this.operateType;
        this.conditionList.push(this.selectData);
        this.endchoiseList = this.conditionList;
        this.$nextTick(() => {
          // 初始化数据
          this.selectList = [];
          this.getFilterlistVals();
          this.activeNames = this.code; // 设置 activeNames 为当前选中的栏目的 code,保持当前条件分类为展开状态
          // this.activeNames = "";
          this.selectData = {};
          this.filterPageListHandle();
        });
      }
    },

    //删除筛选子选项
    deletChildren(e, index) {
      this.conditionList.splice(index, 1);
      this.endchoiseList = this.conditionList;
      this.current = 1;
      this.filterPageListHandle();
    },
    //删除所有的筛选选项
    deleteAllHanlde() {
      this.conditionList = [];
      this.endchoiseList = this.conditionList;
      this.filterPageListHandle();
      this.current = 1;
      this.selectList.forEach((item) => {
        item.value = false;
      });
    },
    returnhandle() {
      this.isModel = true;
      this.subjectdatasetListHanlde();
    },
    saveData() {
      //保存数据
      this.$message({
        message: "当前数据集已保存",
        type: "success",
      });
      this.dialogVisible = false;
    },
    showOtherHandle(item) {
      this.conditionList = [];
      this.selectedList = [];
      this.activeNames = [];
      this.analysisDatasetId = item.id;
      this.isModel = false;
      this.disbleEdit = false;
      // this.conditionList = item.conditionList || [];
      this.current = 1;
      this.bindFilter = true;

      this.filterPageListHandle();
    },
    changeSelectHandle(val) {
      this.select_name = [];
      this.small_data.forEach((item) => {
        if (item.value) {
          this.select_name.push(item.name);
        }
      });
    },
    closeIsSelectHanlde() {
      if (this.isSelect) {
        this.isSelect = false;
      }
    },
    subjectdatasetListGo() {
      subjectdatasetList({
        name: this.search_name,
        subjectId: this.value,
      }).then((res) => {
        if (res.code == 200) {
          this.small_data = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    changeSelection(data) {
      this.select_name = "";
      this.subjectdatasetListGo();
    },
    subjectListHandle() {
      subjectList({}).then((res) => {
        if (res.code == 200) {
          this.options = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },

    changSortName() {
      this.sortBy = 1;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.subjectdatasetListHanlde();
    },
    changSortCreate() {
      this.sortBy = 2;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.subjectdatasetListHanlde();
    },
    changSortUpdate() {
      this.sortBy = 3;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      this.subjectdatasetListHanlde();
    },
    showSaveConfirm() {
      this.dialogVisible = true;
    },
    bindPatentHandle() {
      // if (this.checkedAll) {
      //   this.patentIds = [];
      // }
      bindPatent({
        analysisDatasetId: this.analysisDatasetId,
        patentIds: this.checkedAll ? [] : this.patentIds,
        conditionList: this.checkedAll ? this.conditionList : [],
      }).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.filterPageListHandle();
          this.$message({
            message: "分析数据集保存成功",
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
      editanalysis({
        id: this.analysisDatasetId,
        conditionList: this.conditionList,
      }).then((res) => { });
    },
    deldelreportHandle() {
      this.delShow = true;
      this.checkedAll = false;
      this.patentIds = [];
      this.dataList.forEach((item) => {
        item.checked = false;
      });
      this.delShow = false;
    },
    filterPageListHandle() {
      getDataset(this.analysisDatasetId).then((res) => {
        this.isSaved = res.data.saved;
        this.dataFilterName = res.data.name;
        this.browseTime = res.data.browseTime;
        this.updateTime = res.data.updateTime;
        this.data_total = res.data.collectNum;
      });

      filterPageList({
        current: this.current,
        size: this.currentPage2,
        analysisDatasetId: this.analysisDatasetId,
        conditionList: this.conditionList || [],
        bindFilter: this.bindFilter,
      }).then((res) => {
        // this.data_total = res.total;
        this.dataList = res.records;
        this.dataList.forEach((item) => {
          if (this.checkedAll) {
            this.$set(item, "hasBind", true);
          }
          if (
            //抽取摘要新颖性
            item.dwpiNoveltyExtractList &&
            item.dwpiNoveltyExtractList?.length
          ) {
            item.dwpiNoveltyExtractList.forEach((dwpItem) => {
              let entType = dwpItem.entType; //显示的字段
              let entText = dwpItem.entText; //替换的文本
              let re = new RegExp(
                entText.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"),
                "i"
              );
              let str =
                "<div style='position:relative;border-bottom:3px solid #A4D766;display:inline-block;padding-bottom: 5px;margin-bottom:15px'>" +
                entText +
                "<span style='position:absolute;top:26px;left:0px;width:200px'>" +
                entType +
                "</span></div>";
              if (item.dwpiNovelty != null) {
                item.dwpiNovelty = item.dwpiNovelty.replace(
                  re,
                  " " + str + " "
                );
              }
            });
          }

          if (
            //抽取摘要优势
            item.dwpiAdvantagesExtractList &&
            item.dwpiAdvantagesExtractList?.length
          ) {
            item.dwpiAdvantagesExtractList.forEach((dwpiAdvantages) => {
              let entType = dwpiAdvantages.entType; //显示的字段
              let entText = dwpiAdvantages.entText; //替换的文本
              let re = new RegExp(
                entText.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"),
                "i"
              );
              let str =
                "<div style='position:relative;border-bottom:3px solid #FDEA66;display:inline-block;padding-bottom: 5px;margin-bottom:15px'>" +
                entText +
                "<span style='position:absolute;top:26px;left:0px;width:200px'>" +
                entType +
                "</span></div>";
              if (item.dwpiAdvantages != null) {
                item.dwpiAdvantages = item.dwpiAdvantages.replace(
                  re,
                  " " + str + " "
                );
              }
            });
          }

          if (
            //摘要用途
            item.dwpiUsageExtractList &&
            item.dwpiUsageExtractList?.length
          ) {
            item.dwpiAdvantagesExtractList.forEach((dwpiUsage) => {
              let entType = dwpiUsage.entType; //显示的字段
              let entText = dwpiUsage.entText; //替换的文本
              let re = new RegExp(
                entText.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"),
                "i"
              );
              let str =
                "<div style='position:relative;border-bottom:3px solid #B0A2FF;display:inline-block;padding-bottom: 5px;margin-bottom:15px'>" +
                entText +
                "<span style='position:absolute;top:26px;left:0px;width:200px'>" +
                entType +
                "</span></div>";
              if (item.dwpiUsage != null) {
                item.dwpiUsage = item.dwpiUsage.replace(re, " " + str + " ");
              }
            });
          }
        });
        if (this.openCheck == 1) {
          // this.checkAllPatentID(false);
          // this.checkedAll = false;
          this.openCheck == 0;
        }

        // 将选中的 数据项的hasBind 改为true
        if (this.patentIds.length) {
          this.dataList.forEach((item) => {
            if (this.patentIds.includes(item.id)) {
              this.$set(item, "hasBind", true);
            }
          });
        }
      });
    },

    checkAllPatentID(checked) {
      this.patentIds = [];
      if (checked) {
        this.dataList.forEach((item) => {
          this.$set(item, "hasBind", true);
          this.patentIds.push(item.id);
        });
      } else {
        this.dataList.forEach((item) => {
          this.$set(item, "hasBind", false);
        });
      }
    },

    getPatentIds(checked, item) {
      if (checked) {
        this.patentIds.push(item.id);
      } else {
        let index = this.patentIds.findIndex((val) => val == item.id);
        this.patentIds.splice(index, 1);
      }
      if (this.patentIds.length === this.data_total) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
    },

    changeDataSetHanlde2() {
      if (!this.value) {
        this.$message({
          message: "请选择专题",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (this.select_name.length == 0) {
        this.$message({
          message: "请选择来源数据集",
          type: "error",
          showClose: true,
        });
        return;
      }
      editanalysis({
        id: this.analysisDatasetId,
        name: this.addname,
        subjectDatasetId: String(this.select_name),
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.isdatachange = false;
          this.subjectdatasetListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    changeDataSetHandle(item) {
      this.isdatachange = true;
      this.analysisDatasetId = item.id;
      this.addname = item.name;
      // this.select_name = item.subjectDatasetId
      // this.changeQuery = {
      //   id: item.id,
      //   name:this.addname,
      //   subjectDatasetId:String(this.select_name),
      // };
    },
    delDataSetHandle(item) {
      delanalysis(item.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.subjectdatasetListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    subjectdatasetListHanlde() {
      analysisList({
        name: this.name,
        desc: this.desc, //true倒序，false正序
        sortBy: this.sortBy,
      }).then((res) => {
        if (res.code == 200) {
          res.rows.forEach((item) => {
            item.checked = false;
            item.value = false;
          });
          this.fileDataList = res.rows;
          this.fileDataList.push({
            title: "init",
          });
        }
      });
    },
    getDate(item) {
      return dateUtils.dateToStr("yyyy-MM-DD HH:mm:ss", item);
    },
    handAdd() {
      this.isdatafilter = true;
      this.addname = "";
      this.addcontent = "";
      this.select_name = [];
      this.search_name = "";
      this.small_data = [];
      this.value = "";
      this.bindFilter = false;
    },
    // 数据筛选修改布局
    handAddData() {
      if (!this.addname) {
        this.$message({
          message: "请输入专题名称",
          type: "error",
          showClose: true,
        });
        return;
      }

      if (!this.value) {
        this.$message({
          message: "请选择专题",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (this.select_name.length == 0) {
        this.$message({
          message: "请选择来源数据集",
          type: "error",
          showClose: true,
        });
        return;
      }

      // let subjectDatasetId = [];
      // this.small_data.forEach((item) => {
      //   if (item.value) {
      //     subjectDatasetId.push(item.id);
      //   }
      // });

      // if (this.select_name.length == 0) {
      //   this.$message({
      //     message: "请选择数据集",
      //     type: "error",
      //     showClose: true,
      //   });
      //   return;
      // }

    },
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
      this.current = val;
      this.filterPageListHandle();
    },
    handGo() {
      this.$router.push({
        path: "/history1",
      });
    },
    baiHandle() {
      this.baiShow = true;
      this.numberimg = require("./assets/images/filter5.png");
      this.baiimg = require("./assets/images/filter8.png");
    },
    numberHandle() {
      this.baiShow = false;
      this.numberimg = require("./assets/images/filter6.png");
      this.baiimg = require("./assets/images/filter7.png");
    },
    sortHandler(type) {
      if (type == 2) {
        if (this.sort == 1) {
          this.sort = 2;
          this.downimg = require("./assets/images/dowm.png");
        } else {
          this.sort = 1;
          this.downimg = require("./assets/images/up.png");
        }
      }

      filterlistVals({
        analysisDatasetId: this.analysisDatasetId,
        searchVal: this.addcontent,
        sort: this.sort,
        code: this.code,
        limitNum: this.limitNum,
      }).then((res) => {
        res.forEach((item) => {
          item.value = false;
        });

        let arrry = [];
        if (this.conditionList.length > 0) {
          this.conditionList.forEach((val) => {
            val.vals.forEach((data) => {
              arrry.push(data);
            });
          });
        }

        res.forEach((val) => {
          arrry.forEach((data) => {
            if (val.valName == data) {
              val.value = true;
            }
          });
        });
        this.selectList = res;
      });
    },

    // handleClickOutside(event) {
    //   // 获取目标 DIV 元素
    //   const targetDiv = this.$refs.thrSelectPopup;
    //   // 判断点击的区域是否在目标 DIV 之外
    //   if (!targetDiv.contains(event.target)) {
    //     // 如果是，则隐藏目标 DIV
    //     // targetDiv.style.display = 'none';
    //     this.isSelect = false
    //   }
    // },
    toggleExpand(index) {
      // 切换展开状态数组中对应项的值
      if (this.showMoreDetail.indexOf(index) == -1) {
        this.showMoreDetail.push(index);
      } else {
        this.showMoreDetail = this.showMoreDetail.filter(
          (item) => item != index
        );
      }
    },
  },
};
</script>

<style lang="scss">
.report-title {
  width: 100%;
  min-height: 65px;
  background: #ffffff;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;

  .report-btn {
    display: flex;
    align-items: center;
  }

  .report-btn-add {
    height: 24px;
    width: fit-content;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;

    &>img {
      width: 24px;
      height: 24px;
      margin-right: 4px;
    }

    margin-right: 80px;

    .report-btn-add-title {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 16px;

      &:hover {
        color: #4c56bb !important;
      }
    }

    .report-btn-add-popup {
      position: absolute;
      top: 40px;
      right: 0;
      width: 600px;
      height: 400px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
      z-index: 14;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .report-btn-add-popup-left {
        width: 150px;
        height: 100%;
        background: #f4f6f9;
        border-radius: 8px;
        overflow: auto;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        padding: 12px 12px 0;
        box-sizing: border-box;
        line-height: 16px;

        .report-btn-add-popup-left-li {
          height: 36px;
          width: 100%;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 12px;
          padding: 0 8px;
          box-sizing: border-box;
        }

        .report-btn-add-popup-left-li-select {
          background: #4c56bb;
          color: #fff !important;
        }
      }

      .report-btn-add-popup-right {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        height: 100%;
        width: 100%;
        padding: 12px;
        box-sizing: border-box;

        .report-btn-add-popup-right-li {
          border: 1px solid #e7e7e7;
          padding: 8px 16px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #000000;
          margin-right: 8px;
          cursor: pointer;
          border-radius: 8px;
        }
      }
    }
  }
}

// 组件样式
.thr-select {
  flex: 1 !important;
  height: 40px;
  background: #ffffff;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #e7e7e7;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .thr-select-playolder {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #a7a7a7;
    line-height: 24px;
    width: 200px;
    white-space: nowrap;
    /*规定段落中的文本不进行换行*/
    overflow: hidden;
    /*内容会被修剪，并且其余内容是不可见的。*/
    text-overflow: ellipsis;
    /*显示省略号来代表被修剪的文本*/
  }

  .thr-select-name {
    color: #000000;
  }

  .thr-select-line {
    width: 1px;
    height: 100%;
    background: #d7dfe9;
    margin-right: 8px;
  }

  .thr-select-icon {
    font-size: 16px;
    color: #d7dfe9;
  }

  .thr-select-popup {
    width: 100%;
    // height: auto;
    max-height: 266px;
    position: absolute;
    top: 44px;
    left: 0;
    padding: 24px;
    box-sizing: border-box;
    z-index: 9;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
    // overflow-y: scroll;
  }

  .thr-select-ul {
    margin-top: 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .thr-select-li {
    height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    cursor: pointer;

    &>span {
      margin-left: 4px;
    }
  }
}

// 样式覆盖
.datafilter-dialog {
  .el-dialog__header {
    padding: 24px;
  }

  .el-dialog__body {
    padding: 0 24px;
  }

  .el-dialog__footer {
    padding: 24px;
  }

  .datafilter-dialog__body {
    .datafilter-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      // height: 46px;
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0 !important;
      }

      &>div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }

      .datafilter-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;
      }
    }

    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;

      .el-upload {
        width: 100% !important;
        margin-bottom: 24px;
      }

      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }

      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }

      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }

      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}

.datafilter-filter-right-body {
  .datafilter-item {
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 24px;
  }

  .btn-open {
    font-size: 14px;
    padding: 16px 0 16px 4%;
    cursor: pointer;
  }

  .el-collapse-item__header {
    height: auto;
    line-height: 24px;
    padding: 24px 0;
    display: block;

    .el-collapse-item__arrow {
      display: none;
    }

    &.is-active {
      padding: 24px 0 0 0;
    }
  }

  .el-collapse-item {
    position: relative;

    .btn-open {
      position: absolute;
      bottom: 24px;
      right: 24px;
      font-weight: normal;
    }
  }
}

.choise {
  // position: absolute;
  width: 271px;
  // top: 80px;
  padding: 0 24px;
  z-index: 99999;
  margin-bottom: 16px;

  .el-collapse-item__header {
    padding: 0 0 0 16px;
    background: #fff;
    border: 1px solid #4c56bb;
    height: 48px;
  }

  .filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
  }

  .el-collapse-item__wrap {
    background: #fff;
    box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.2);
    border: none;
    padding: 12px;

    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .filter-item {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      background: #e8edff;

      .filter-item-operateType {
        margin-right: 4px;

        &.type1 {
          color: #409eff;
        }

        &.type2 {
          color: #ff0000;
        }
      }

      .filter-item-name {
        color: #999;
      }

      .filter-item-value {
        color: #000;
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }
}

.datafilter-coll {
  border-top: none !important;

  .el-collapse-item__header {
    height: 40px;
  }

  .el-collapse-item__content {
    padding: 0 !important;
  }

  .el-collapse-item__wrap {
    border-bottom: none !important;
  }

  .datafilter-coll-ipt {
    display: flex;
    align-items: center;

    &>img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      cursor: pointer;

      &:last-child {
        margin: 0 !important;
      }

      &:first-child {
        margin-left: 8px;
      }
    }

    .datafilter-coll-temp-ipt {
      margin-right: 8px;

      .el-input__icon {
        font-size: 20px !important;
      }
    }

    margin-bottom: 8px;
  }

  .datafilter-coll-ul {
    margin-top: 16px;
    overflow-y: auto;
    overflow-x: hidden;

    .title-line {
      width: 4px;
      height: 8px;
      background-color: #313131;
    }
  }

  .datafilter-coll-li {
    height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 12px;
    color: #939393;
    line-height: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;

    &>span {
      margin-left: 4px;
    }

    .el-checkbox__label {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #939393;
      line-height: 12px;
      width: 190px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .datafilter-coll-bt {
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &>div {
      width: fit-content;
      height: 28px;
      background: #ffffff;
      border-radius: 6px;
      opacity: 1;
      border: 1px solid #d7dfe9;
      padding: 6px 12px;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #455468;
      line-height: 16px;
    }
  }

  .datafilter-coll-bt1 {
    background: #4c56bb !important;
    margin-right: 12px;
    color: #ffffff !important;
  }
}

.datafilter-filter-dialog {
  .el-dialog__header {
    padding: 24px 24px 0 !important;

    &>div {
      font-size: 22px;
      font-family: Inter, Inter;
      font-weight: normal;
      color: #313131;
      line-height: 24px;
      text-align: center;
    }
  }

  .el-dialog__body {
    padding: 24px !important;
    font-size: 15px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #313131;
    line-height: 24px;
    text-align: center;
  }

  .el-dialog__footer {
    padding: 0 24px 24px !important;
  }

  .datafilter-filter-dialog-bt {
    height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;


  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.datafilter {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .datafilter-model {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    box-sizing: border-box;
  }

  .datafilter-filter {
    width: 100%;
    height: calc(100% - 63px);
    display: flex;
    background: #fff !important;
  }

  .datafilter-title {
    height: 46px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .datafilter-title__name {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #313131;
      line-height: 23px;
    }

    .datafilter-title__temp {
      display: flex;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 24px;
      margin-right: 24px;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;

      .datafilter-title__temp-name {
        margin-right: 4px;
        width: fit-content;
        height: 24px;
        white-space: nowrap;
      }

      .datafilter-title__temp-cion {
        width: 16px;
        height: 16px;
      }
    }

    .datafilter-title__right {
      display: flex;
      align-items: center;
    }

    .datafilter-title__temp-ipt {
      width: 300px;
    }

    .datafilter-title__temp-btn {
      margin-left: 24px;
    }
  }

  .datafilter-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
    box-sizing: border-box;
    overflow-y: scroll;

    .datafilter-content-temp {
      width: calc(25% - 24px);
      margin-bottom: 24px;
      margin-right: 24px;
      // min-height: 200px;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 8px 24px 0px rgba(76, 86, 187, 0.2);
      }
    }

    .datafilter-content-add {
      width: 100%;
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #4c56bb;
      line-height: 20px;
    }

    .datafilter-content-item {
      padding: 24px;
      box-sizing: border-box;
      position: relative;
      // display: flex;

      // .analyzepage-icon-view {
      //   position: absolute;
      //   right: 50px;
      //   font-size: 24px;
      //   color: #000000;
      // }
      .analyzepage-icon-view {
        position: absolute;
        right: 56px;
        bottom: 18px;
        font-size: 24px;
        color: #000000;
        display: none;
      }

      .datafilter-icon {
        display: none;
        position: absolute;
        right: 24px;
        bottom: 18px;
        font-size: 24px;
      }

      &:hover {
        &>i {
          display: inline-block !important;
        }
      }

      .datafilter-content-item-name {
        height: 15px;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        line-height: 21px;
        width: auto;
        margin-bottom: 12px;
      }

      .datafilter-content-item-count {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .datafilter-content-item-content {
        height: 60px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
      }

      .datafilter-content-item-date {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 14px;
        width: 100%;

        &>img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }

        &>i {
          display: none;
        }

        &:hover {
          &>i {
            display: inline-block !important;
          }
        }
      }

      .datafilter-content-item-line {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 14px;
      }

      .datafilter-content-item-btm {
        display: flex;

        .datafilter-content-item-btm-name {
          display: flex;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #313131;
          line-height: 20px;

          .datafilter-content-item-btm-num {
            font-size: 16px;
            font-family: DIN Alternate, DIN Alternate;
            font-weight: bold;
            color: #313131;
            line-height: 20px;
          }
        }

        .datafilter-content-item-btm-up {
          width: 90px;
          height: 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;

          &>img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          background: #f2f5ff;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFang SC,
          PingFang SC;
          font-weight: 400;
          color: #4c56bb;
          line-height: 20px;
          margin-left: 8px;
        }
      }
    }
  }

  .datafilter-filter-left {




    width: 325px;
    min-width: 325px;
    /* 设置最小宽度 */
    max-width: 600px;
    resize: horizontal;
    /* 允许水平调整大小 */
    cursor: ew-resize;
    /* 设置鼠标指针样式为水平调整大小的箭头 */
    height: 100%;
    background: #ffffff;
    opacity: 1;
    border-right: 1px solid #e7e7e7;
    box-sizing: border-box;
    padding: 24px 0;
    // overflow-y: scroll !important;

    .datafilter-filter-left-title {
      width: 100%;
      padding: 0px 0 24px 24px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #313131;
      line-height: 16px;
      border-bottom: 1px solid #e7e7e7;
      box-sizing: border-box;
      margin-bottom: 8px;
    }
  }

  .datafilter-filter-right {
    padding: 24px;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;

    .datafilter-filter-right-top {
      height: 24px;
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      overflow-x: auto;

      .datafilter-filter-right-top-tilte {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        margin-right: 4px;
      }

      .datafilter-filter-right-ul {
        display: flex;
        width: auto;
        height: 100%;
        overflow: hidden;
        align-items: center;

        .datafilter-filter-right-li {
          width: fit-content;
          height: 24px;
          background: #f2f5ff;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          font-size: 12px;

          color: #4c56bb;
          line-height: 20px;
          padding: 0 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 8px;
          cursor: pointer;

          &>i {
            font-size: 18px;
            margin-left: 8px;
          }
        }
      }

      .datafilter-filter-right-close {
        margin-left: 12px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 20px;
        cursor: pointer;
      }
    }

    .datafilter-filter-right-select {
      height: 34px;
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;

      .datafilter-filter-select-left {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 55px;
      }

      .datafilter-filter-right-bt {
        height: 34px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        &>div {
          width: fit-content;
          height: 34px;
          background: #ffffff;
          opacity: 1;
          padding: 6px 12px;
          box-sizing: border-box;
          cursor: pointer;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #455468;
          line-height: 20px;
        }

        .datafilter-filter-right-bt2 {
          background: #4c56bb !important;
          margin-left: 12px;
          color: #ffffff !important;
        }

        .mgl12 {
          margin-left: 12px;
        }
      }
    }

    .datafilter-filter-right-body {
      width: 100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      margin-top: 24px;

      .datafilter-filter-right-temp {
        height: auto;
        width: 100%;
        position: relative;
        background: #ffffff;
        border-bottom: 1px solid #e7e7e7;
        box-sizing: border-box;
        padding: 24px 0 24px 0px;
        cursor: pointer;
      }

      .datafilter-filter-right-temp-checkbox {
        position: absolute;
        top: 24px;
        left: 0;
        z-index: 1;
      }

      .datafilter-filter-right-temp-body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .datafilter-filter-right-temp-title {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          color: #4c56bb;
          line-height: 19px;
        }

        .datafilter-filter-right-temp-content {
          display: flex;
          font-size: 14px;
          font-weight: 400;
          color: #939393;
          margin-top: 8px;

          // line-height: 16px;
          // margin-bottom: 8px;
          .label {
            width: 100px;
          }
        }

        .datafilter-filter-right-temp-ul {
          display: flex;
          align-items: center;
          height: 24px;
          width: 100%;

          .label {
            width: 150px;
          }

          .datafilter-filter-right-temp-li {
            height: 24px;
            background: #ffffff;
            border-radius: 6px;
            opacity: 1;
            border: 1px solid #d7dfe9;
            box-sizing: border-box;
            font-size: 12px;
            line-height: 24px;
            padding: 0 8px;
          }

          .otherBk1 {
            background: #4bb966;
            color: #fff !important;
          }

          .otherBk2 {
            background: #e8c045;
            color: #fff;
          }

          .otherBk3 {
            background: #adb2b6;
            color: #fff;
          }

          .marginL10 {
            margin-left: 10px;
          }
        }
      }
    }
  }

  .datafilter-filter-right-btm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-top: 24px;
  }
}

.form-control {
  width: 100%;
}

.date-item-title {
  font-size: 18px;
  font-weight: bold;
}

.specia-title__temp-cion {
  width: 16px;
  height: 16px;
}
</style>
